<!-- 回访规则 -->
<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="12">
          <Tabs v-model="query.type" :data="tabsName" @change="searchChange" />
        </el-col>
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button @click="changeRules('')">+ 增加规则</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="margin-top box-show" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="type"
          label="类型"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="returnRule"
          label="时机"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="returnName"
          label="回访人"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="createdTime"
          label="创建时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="status"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button v-loading="loading" type="text" @click="modifyHandle(row)">修改</el-button>
            <el-button v-loading="loading" type="text" @click="deleteHandle(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <VisitRules ref="visitRules" @success="getList" />
  </div>
</template>
<script>
import Tabs from "@/components/SearchSelection";
import { tableColor, labelHeigh } from '@/utils/common.js';
import VisitRules from './visitRules.vue';
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
export default {
  components: {
    Tabs,
    VisitRules,
  },
  data() {
    return {
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "未上门回访", name: "未上门回访" },
        { id: "未成交回访", name: "未成交回访" },
        { id: "治疗后回访", name: "治疗后回访" },
      ],
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      query: {
        type: "未上门回访",
      },
      tableColor,
      innerHeight: null,
      total: 0,
      tableData: [],
      loading: false,
    };
  },
  mounted() {
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (query.type === "全部") query.type = undefined;
      const res = await this.$api['data/returnVisit/returnVisitRule']({ ...this.queryParams, query: { ...query }});
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
    searchChange(e) { // Tabs切换的方法函数
      this.query.type = e;
      this.getList();
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    changeRules(row) {
      this.$refs.visitRules.visitRules(row);
    },
    async deleteHandle(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      } else {
        this.loading = true;
        const res = await this.$api['data/returnVisit/deleteReturnVisitRule']({ id: row.id });
        if (res.code !== 200) return this.$message.error(res.msg);
        this.$message.success("回访规则删除成功");
        this.queryParams.page = 1;
        this.getList();
        this.loading = false;
      }
    },
    async modifyHandle(row) {
      const res = await this.$api['data/returnVisit/getReturnVisitRule']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.changeRules(res.data);
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top{
    margin-top: 10px;
}
</style>
